
import { shallowRef } from "vue";
import { VButton, VText, VInput } from "@/components/MaterialList/index.ts";

export const elementsList = shallowRef([
  {
    name: "v-button",
    component: VButton,
    attrs: {
      propValue: "按钮",
      icon: "el-icon-circle-plus",
      label: "按钮",
    },
    style: {
      width: "80%",
      height: "100%",
      fontSize: "14px",
      fontWeight: "500",
      lineHeight: "1.5",
      letterSpacing: "0",
      textAlign: "center",
      color: "#ffffff",
      backgroundColor: "#007bff",
      border: "1px solid #0062cc",
      borderRadius: "4px",
    },
    containerStyle: {
      width: "150px",
      height: "50px",
      padding: "10px",
      margin: "5px",
      border: "1px solid #ccc",
      borderRadius: "4px",
      boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
      overflow: "hidden",
    },
  },
  {
    name: "v-input",
    component: VInput,
    attrs: {
      propValue: "请输入内容",
      icon: "el-icon-document",
      label: "文本框",
    },
    style: {
      width: "100%",
      height: "100%",
      fontSize: "14px",
      fontWeight: "400",
      lineHeight: "1.5",
      letterSpacing: "0",
      textAlign: "left",
      color: "#333333",
      backgroundColor: "#ffffff",
      border: "1px solid #cccccc",
      borderRadius: "4px",
      padding: "0 10px",
    },
    containerStyle: {
      width: "150px",
      height: "50px",
      padding: "10px",
      margin: "5px",
      border: "1px solid #ccc",
      borderRadius: "4px",
      boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
      overflow: "hidden",
    },
  },
]);

export const textList = shallowRef([
  {
    name: "v-text",
    component: VText,
    attrs: {
      propValue: "文本",
      icon: "el-icon-edit",
      label: "文本",
    },
    style: {
      width: "100%",
      height: "100%",
      fontSize: "14px",
      fontWeight: "500",
      lineHeight: "1.5",
      letterSpacing: "0",
      textAlign: "left",
      color: "#333333",
      backgroundColor: "#f5f5f5",
      padding: "5px 10px",
      border: "1px solid #dddddd",
      borderRadius: "4px",
    },
    containerStyle: {
      width: "150px",
      height: "50px",
      padding: "10px",
      margin: "5px",
      border: "1px solid #ccc",
      borderRadius: "4px",
      boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
      overflow: "hidden",
    },
  },
])

